<template>
	<view>
		<u-navbar :title="$t('my.add')" placeholder bgColor="#0fbc96" leftIconColor="#FFFFFF"
			titleStyle="color: #FFFFFF" autoBack>
		</u-navbar>

		<view class="content">
			<up-form :model="formData" :rules="rules" :labelWidth="120" :labelStyle="labelStyle" labelPosition="top"
				ref="uFormRef">
				<up-form-item :label="$t('my.link_name')" prop="chain_type">
					<up-input v-if="routeList.length <= 0" v-model="formData.chain_type"
						:placeholder="$t('home.please_select_link')" border="none" />
					<view v-else class="flex-w" :class="[formData.chain_type ? 'color-black' : 'color_c0c4cc']"
						@click="visibleNetwork = !visibleNetwork">
						{{formData.chain_type ? formData.chain_type : $t('home.please_select_link')}}
					</view>
				</up-form-item>
				<up-line color="#2e3546"></up-line>
				<up-form-item :label="$t('my.name_holder')" prop="username">
					<up-input v-model="formData.username" :placeholder="$t('my.please_enter_cardholder_name')"
						border="none" />
				</up-form-item>
				<up-line color="#2e3546"></up-line>
				<up-form-item :label="$t('home.wallet_address')" prop="wallet_address">
					<up-input v-model="formData.wallet_address" :placeholder="$t('my.please_enter_wallet_address')"
						border="none" />
				</up-form-item>
				<up-line color="#2e3546"></up-line>
			</up-form>
			<view class="mar-top-80">
				<up-button color="#ffc820" :customStyle="customStyle" @click="submit">{{$t('my.add')}}</up-button>
			</view>
		</view>

		<up-popup :show="visibleNetwork" mode="bottom" @close="visibleNetwork = false">
			<view class="popup-content">
				<view class="popup-head">
					<view></view>
					<text>{{$t('home.please_select_link')}}</text>
					<up-icon @click="visibleNetwork = false" name="close-circle" color="#ffffff" size="24"></up-icon>
				</view>

				<scroll-view scroll-y class="scroll-list">
					<up-radio-group activeColor="#0184FA" v-model="formData.chain_type" @change="visibleNetwork = false"
						iconPlacement="right">
						<up-radio v-for="item in routeList" :key="item.id" :label="item.chain_type"
							:name="item.chain_type"></up-radio>
					</up-radio-group>
				</scroll-view>
			</view>
		</up-popup>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive
	} from 'vue';
	import {
		useI18n
	} from 'vue-i18n';
	import {
		walletAdd,
		rechargeChannel
	} from '@/api/user'
	import {
		onLoad
	} from '@dcloudio/uni-app'

	const {
		t
	} = useI18n()
	const visibleNetwork = ref(false)
	// 响应式表单数据  
	const formData = reactive({
		chain_type: '',
		username: '',
		wallet_address: ''
	});

	const routeList = ref([]) // 可选择的线路

	const labelStyle = {
		color: '#edad14',
		margin: '20rpx 0'
	}

	const customStyle = {
		color: '#000000',
		borderRadius: '20rpx',
		boxShadow: '0 1.2077vw 10rvw rgba(75, 98, 157, .11)'
	}

	// 校验规则  
	const rules = {
		chain_type: [{
			required: true,
			message: t('home.please_select_link'),
			trigger: ['blur', 'change'],
		}, ],
		username: [{
			required: true,
			message: t('my.please_enter_cardholder_name'),
			trigger: 'blur'
		}],
		wallet_address: [{
			required: true,
			message: t('my.please_enter_wallet_address'),
			trigger: 'blur'
		}]
	};

	// 表单引用  
	const uFormRef = ref(null);
	//获取可选择的线路
	const handSelectRoute = async () => {
		const res = await rechargeChannel()
		routeList.value = res.data.lists
	}

	const validate = () => {
		return new Promise((resolve, reject) => {
			uFormRef.value.validate().then(res => {
				resolve(true)
			}).catch(err => {
				uni.$u.toast(t('my.please_complete_information'))
				reject(err)
			})
		})
	}

	// 提交方法
	const submit = async () => {
		const result = await validate()
		const res = await walletAdd({
			...formData
		})
		if (res.code === 200) {
			uni.$u.toast(t('my.successfully_added_wallet'));
			uni.navigateBack();
		}
	}

	onLoad(() => {
		handSelectRoute()
	})
</script>

<style lang="scss" scoped>
	:deep(.u-radio) {
		min-width: 100%;
		padding: 3.6232vw;
		border-radius: 1.9324vw;
		margin-bottom: 2.4155vw;
		background-color: #ffc820;
		box-sizing: border-box;
	}

	.content {
		padding: 40rpx 25rpx 0 25rpx;
		box-sizing: border-box;
	}

	.popup-content {
		height: 600rpx;

		.popup-head {
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-size: 32rpx;
			padding: 24rpx 40rpx;
			text-align: center;
			background-color: #0184FA;
			color: #ffffff;
		}

		.scroll-list {
			height: 486rpx;
			padding: 0 40rpx;
			padding-top: 30rpx;
			box-sizing: border-box;
		}
	}
</style>